<template>
	<view>
		<view class="goodList">
			<img class="banner" :src="banner" alt="">
			<view class="goodlist-item" v-for="(p,i) in goodList" @click="godetile(p.itemId)" :key="i">
				<img class="good-img" :src="p.img" alt="">
				<view class="good-desc">
					<view class="pay-top">
						<text class="pay-name"><text class="pay-type">{{p.itemMarketType}}</text>{{p.goodsName}}</text>
					</view>
					<view class="pay-middle">
						<view>
							<text class="newprice">￥{{Math.round((p.salePrice-p.couponValue)*10)/10}}</text>
							<text class="saleprice">￥{{p.salePrice}}</text>
						</view>
						<text class="pay-count">已售{{p.saleQty}}</text>
					</view>
					<view class="pay-bottom">
						<view class="convalue">{{p.couponValue}}元劵
							<view class="left">
								
							</view>
							<view class="right">
							
							</view>
						</view>
					
						<text class="shop-name">{{p.shopName}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				goodList: [],
				banner:null
			}
		},
		methods: {
	
			getData() {
				uni.request({
					url: `https://appfly.cn/api/daogouGoods/specialGoodsList?specialId=${this.id}`,
					header: {
						cookie: 'easyweb=2001; target=blank; navbar=0; count=20; verCode=1211; appPackage=cn.appfly.cookbook; lang=zh-CN; token=; __gads=ID; __gpi=UID',
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						// this.detileList = res.data.data
						this.goodList = res.data.data
						// console.log(res.data);//输出
						
					}
				});
			},
			godetile(id){
				
					uni.navigateTo({
						url: `/pages/paydetile/paydetile?id=${id}`
					})
				
			}
	
		},
		mounted() {
			this.getData()
			// console.log(this.time);
		},
		onLoad(option) {
			this.id = option.id;
			this.banner=option.img;
			this.getData()
			uni.setNavigationBarTitle({
				title: ''
			});
		}
	}
</script>

<style lang="scss">
	.goodList{
		.banner{
			height: 150px;
		}
		.goodlist-item{
			margin-top: 10px;
			display: flex;
			font-size: 12px;
			.good-img{
				height: 100px;
				width: 90px;
				flex: 0 0 30%;
			}
			.good-desc{
				flex: 0 0 65%;
				margin-left: 5%;
			}
			.pay-top {
				width: 100%;
				height: 30px;
			
				.pay-type {
					background-color: red;
					color: white;
					font-size: 12px;
					display: inline-block;
					width: 30px;
					text-align: center;
					border-radius: 4px;
					margin-right: 5px;
				}
			
				.pay-name {
					display: inline-block;
					height: 30px;
					width: 200px;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			
			.pay-middle {
				display: flex;
				justify-content: space-between;
				font-size: 10px;
				color: #999;
				padding: 0 12px 0 0;
			
				.newprice {
					color: red;
					font-size: 16px
				}
			
				.saleprice {
					text-decoration: line-through;
				}
			
				.pay-count {
					line-height: 30px;
				}
			}
			
			.pay-bottom {
				display: flex;
				flex-direction: column;
				color: #999;
				
			
				.convalue {
					background-color: red;
					width: 75px;
					height: 20px;
					line-height: 20px;
					font-size: 12px;
					border-radius: 6px;
					text-align: center;
					color: white;
					position: relative;
					margin-bottom: 10px;
			
					.left {
						position: absolute;
						left: -5px;
						top: 50%;
						transform: translateY(-50%);
						background-color: #fff;
						width: 10px;
						height: 10px;
						border-radius: 999px;
					}
					.right{
						position: absolute;
						right: -5px;
						top: 50%;
						background-color: #fff;
						transform: translateY(-50%);
						width: 10px;
						height: 10px;
						border-radius: 999px;
					}
				}
			
				
			}
		}
	}
</style>